<!--
 * @Author: 杨三炮
 * @Date: 2021-12-03 17:43:55
 * @LastEditors: 杨三炮
 * @LastEditTime: 2021-12-04 13:31:58
 * @FilePath: \daka\src\views\Mine.vue
-->

<template>
  <div>
    <div class="card flex h-32 items-center">
      <svg
        t="1638527906015"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4111"
        width="70"
        height="70"
      >
        <path
          d="M865.8 746.5c-19.3-45.7-47-86.8-82.3-122-35.3-35.3-76.3-62.9-122-82.3-4.4-1.9-8.9-3.7-13.4-5.4C720.1 491.5 768 411.4 768 320c0-141.4-114.6-256-256-256S256 178.6 256 320c0 91.4 47.9 171.5 119.9 216.8-4.5 1.7-8.9 3.5-13.4 5.4-45.7 19.3-86.8 47-122 82.3-35.3 35.3-62.9 76.3-82.3 122-20 47.4-30.2 97.7-30.2 149.5 0 17.7 14.3 32 32 32s32-14.3 32-32c0-85.5 33.3-165.8 93.7-226.3C346.2 609.3 426.5 576 512 576s165.8 33.3 226.3 93.7C798.7 730.2 832 810.5 832 896c0 17.7 14.3 32 32 32s32-14.3 32-32c0-51.8-10.2-102.1-30.2-149.5zM376.2 455.8C340 419.5 320 371.3 320 320s20-99.5 56.2-135.8C412.5 148 460.7 128 512 128s99.5 20 135.8 56.2C684 220.5 704 268.7 704 320s-20 99.5-56.2 135.8C611.5 492 563.3 512 512 512s-99.5-20-135.8-56.2z"
          fill="#1875F0"
          p-id="4112"
        ></path>
      </svg>
      <div v-if="isLogin">
        <span>
          {{ user.username }}
          <van-tag type="primary">{{
            user.type == 1 ? '管理员' : user.type == 2 ? '学生' : '老师'
          }}</van-tag></span
        >
        <p class="text-gray-600 text-sm mt-2">天水师范学院</p>
      </div>
      <h3 v-else @click="showPop = !showPop">点击登录</h3>
    </div>
    <van-button
      v-if="isLogin"
      block
      @click="outlogin"
      type="danger"
      class="mt-3"
      >退出登录</van-button
    >
    <!-- 登录pop框 -->
    <van-popup
      v-model="showPop"
      round
      position="bottom"
      bind:close="onClose"
      class="flex flex-col justify-center"
      :style="{ height: '30%' }"
    >
      <van-field
        v-model="getUserInfo.sno"
        required
        clearable
        label="学号/工号"
        icon="question-o"
        placeholder="请输入学号"
        bind:click-icon="onClickIcon"
      />
      <van-radio-group
        class="flex justify-center p-4"
        v-model="getUserInfo.type"
        direction="horizontal"
      >
        <van-radio name="2">学生</van-radio>
        <van-radio name="3">老师</van-radio>
      </van-radio-group>
      <van-button type="primary" @click="getUser">获取信息</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Mine',
  data () {
    return {
      showPop: false, //是否显示登录Pop框
      //获取用户登录的时候的学号
      getUserInfo: {
        sno: '',
        type: ''
      },
      isLogin: false,
    }
  },
  computed: {
    user () {
      return this.$store.getters.user
    }
  },
  created () {
    if (!localStorage.userInfo) {
      this.$toast.fail('暂未登录')
    } else {
      this.isLogin = true
    }
  },
  methods: {
    /* 获取用户信息 */
    async getUser () {
      //判断是否为空
      if (!this.getUserInfo.sno) return this.$toast.fail('请填写信息')

      //发送请求获取数据
      const { data: userinfo } = await this.$Axios.get(`getuser/${this.getUserInfo.sno}/${this.getUserInfo.type}`)

      if (userinfo.code == 404) return this.$toast.fail(userinfo.msg)
      console.log(userinfo);
      //获取的数据存到localSrorage里面
      localStorage.setItem('userInfo', JSON.stringify(userinfo[0]))
      //token存储到vuex中
      this.$store.dispatch('setAuthenticated', userinfo[0])
      this.$store.dispatch('setUser', userinfo[0])
      //关闭pop弹窗
      this.showPop = false
      this.isLogin = true
    },
    /* 
      退出登录 
      清空数据
    */
    outlogin () {
      localStorage.removeItem('userInfo')
      this.isLogin = false
      this.showPop = !this.showPop
    }
  }
}
</script>

<style>
.card {
  @apply w-full  rounded-md bg-white shadow-lg mt-3 py-3 px-4 text-lg;
}
</style>